{% load comments %}
{% load set_var %}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="commentairesPhoto{{photoContent.id}}" >
	<!-- lightbox content -->
	<img id="lazy{{photoContent.id}}" src="/media/images/grey.gif" data-original="/media/{{photoContent.image}}" width="{{photoContent.newWidth}}" height="{{photoContent.newHeight}}" style="margin-top:15px;" alt="{{photoContent.title}}">
	<!-- <img style="height:500px;margin-top:15px;" src="media/uploads/original/{{photoContent.image}}" /> -->
	<img src="/media/images/croix.png" class="close" />

	<div class="btAggrandir" style="" >
		<a href="/media/{{photoContent.image}}" target="_blank">Afficher la photo taille originale</a>
	</div>
	<div class="details" >
		<!--<div class="minimap" ><img src="/media/images/carte.png" /></div>-->
		<div class="legend">
			<span class="date">( post&eacute;e le {{photoContent.datePosted.day}}/{{photoContent.datePosted.month}}/{{photoContent.datePosted.year}} )</span>
			<span style="font-size:15px;font-weight:bold !important;"><b>{{photoContent.title}}</b>  -  {{photoContent.city.name}}, {{photoContent.city.region.country.name}} ({{photoContent.dateTaken.day}}/{{photoContent.dateTaken.month}}/{{photoContent.dateTaken.year}})</span>
			<div style="margin-top:3px;">
				{{photoContent.caption}}
			</div>
			<div style="margin-top:4px;">
				<!--<span style="float:right;">
					<img src="/media/images/facebook.png" /> Facebook | 
					<img src="/media/images/twitter.png" /> Twitter | 
					<img src="/media/images/etoile.png" /> Add to favorite
				</span>-->
				{% get_comment_count for photoContent as comment_count %}
				Par <em><a href="/profile/{{photoContent.album.photographer.pk}}">{{photoContent.album.photographer.username}}</a></em> |  <img src="/media/images/bulle.png" /> <span id="nbComments{{photoContent.id}}">{{comment_count}}</span> commentaires
			</div>
			
		</div>
		<div style="clear:both;"></div>
		<!--<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:25px; margin-top:10px;"></iframe>-->
        <div class="fb-like" data-href="http://artsightworld.alwaysdata.net/" data-send="true" data-width="450" data-show-faces="true"></div>

		<span style="float:right;margin-top : 20px;">
			<!--<img src="/media/images/facebook.png" /> Facebook | 
			<img src="/media/images/twitter.png" /> Twitter | -->
			<img src="/media/images/etoile.png" /> 
			{% if photoContent in myPhotographer.photosLiked.all %}
				<span class="addFavorite" id="fav_photo_{{photoContent.id}}" onClick="removeFromFavorite({{photoContent.id}})">Retirer favoris</span>
			{% else %}
				<span class="addFavorite" id="fav_photo_{{photoContent.id}}" onClick="addToFavorite({{photoContent.id}})">Ajouter aux favoris</span>
			{% endif %}
		</span>
		<div style="clear:both;"></div>
		<div style="margin-top:10px;width:750px;border-bottom:1px solid white;"></div>
		
			<div id="commentsList{{photoContent.id}}">

			</div>
			{% if user.is_authenticated %}
				<div class="addComm" style="margin:auto;width:650px;margin-top:10px;">
					<img class="avatar" src="/media/images/avatar.png" style="" />
					
					{% get_comment_form for photoContent as form %}
					{% load comments i18n %}
					<form id="form{{photoContent.id}}" action="{% comment_form_target %}" method="post">{% csrf_token %}
						<textarea name="comment" id="id_comment">Ecrivez votre commentaire</textarea>
						{% for field in form %}
							{% if field.is_hidden %}
							 {{ field }}
							{% endif %}
						{% endfor %}
						<input type="hidden" name="name" id="id_name" value="0" />
						<input type="hidden" name="email" id="id_email" value="artsightworld@alwaysdata.net" />
						<input type="hidden" name="url" id="id_url" value="artsightworld.com" />
						<input style="float:right;" type="button" id="commentForm{{photoContent.id}}" class="submit-post" value="Envoyer" />
					</form>
					<div style="color:red;font-weight:bold;" id="result{{photoContent.id}}"></div>
				</div>			
			{% else %}
				<div class="commentaire" style="text-align:center; min-height:15px !important;">
					Vous devez &ecirc;tre connect&eacute; pour pouvoir poster un message
				</div>
			{% endif %}
		</div>
		
		<br /><br /><br />
	</div>
</div>


